import React, { Component } from 'react';
import { StyleSheet, Clipboard, Linking, Alert, ImageBackground, TextInput } from 'react-native';
import { Container, Content, View, Button, Text, Icon, Fab } from 'native-base';
import { ButtonGroup } from 'react-native-elements'
import { connect } from 'react-redux';

import { WebView } from 'react-native-webview';
import { Header } from '../../component';
import { Colors, Metrics } from '../../theme';

class OpenLink extends Component {
  constructor(props) {
    super(props);
    this.state = {
      webViewUri: '',
      inputVal: '',
      activeBtn: false
    }
  }

  UNSAFE_componentWillMount() {

  }

  componentDidMount() {
    this._getContent();
  }

  async _getContent() {
    const contentStr = await Clipboard.getString();
    if (contentStr.indexOf(".") != '-1') {
      Alert.alert(
        '您是否要打开该链接',
        contentStr,
        [
          { text: '取消', style: 'cancel' },
          { text: '确定', onPress: () => this.setState({ webViewUri: contentStr }) },
        ],
        { cancelable: false }
      )
    }
  }

  // 点击复制
  clipboardFunc(str) {
    str = str + '';
    Clipboard.setString(str);
    Toast.show({
      text: '文本已复制!',
      type: "success"
    })
  }

  openwebBrowserFunc() {
    Linking.openURL(this.state.webViewUri).catch(err => console.error('An error occurred', err));
  }

  openLinkFunc() {
    let links = this.state.inputVal;
    if (links.search("http") == '-1') {
      links = 'http://' + links;
    }
    this.setState({ webViewUri: links });
  }

  render() {
    return (
      <Container>
        {
          this.state.webViewUri ?
            <View style={Styles.Content}>
              <WebView
                ref="webView"
                source={{ uri: this.state.webViewUri }}
              />

              <Fab
                active={this.state.activeBtn}
                direction="up"
                containerStyle={{ width: 45 }}
                style={{ backgroundColor: Colors.subject }}
                position="bottomRight"
                onPress={() => this.setState({ activeBtn: !this.state.activeBtn })}>
                <Icon type="FontAwesome" name="tachometer" style={Styles.boxIcons} />
                <Button onPress={() => this.setState({webViewUri: ''})} style={{ backgroundColor: Colors.subject, width: 30, height: 30 }}>
                  <Icon type="FontAwesome" name="home" style={Styles.boxIcons} />
                </Button>
                <Button onPress={() => this.refs['webView'].goBack()} style={{ backgroundColor: Colors.subject, width: 30, height: 30 }}>
                  <Icon type="FontAwesome" name="chevron-left" style={Styles.boxIcons} />
                </Button>
                <Button onPress={() => this.refs['webView'].goForward()} style={{ backgroundColor: Colors.subject, width: 30, height: 30 }}>
                  <Icon type="FontAwesome" name="chevron-right" style={Styles.boxIcons} />
                </Button>
                <Button onPress={() => this.refs['webView'].reload()} style={{ backgroundColor: Colors.subject, width: 30, height: 30, margin: 0, padding: 0 }}>
                  <Icon type="FontAwesome" name="refresh" style={Styles.boxIcons} />
                </Button>
                <Button onPress={() => this.openwebBrowserFunc()} style={{ backgroundColor: Colors.subject, width: 30, height: 30 }}>
                  <Icon type="FontAwesome" name="globe" style={Styles.boxIcons} />
                </Button>
              </Fab>
            </View>
            :
            <Content>
              <Header title="打开链接" onLeftPress={() => this.props.navigation.goBack()} />
                <View style={Styles.textContent}>
                  <TextInput
                    style={Styles.searchInput}
                    placeholder="输入网址"
                    onChangeText={(inputVal) => { this.setState({ inputVal }) }}
                    value={this.state.inputVal}
                    onSubmitEditing={this.openLinkFunc}
                  />
                </View>
            </Content>
        }
      </Container>
    );
  }

}

const mapStateToProps = state => ({

});

const mapDispatchToProps = dispatch => ({

});
export default connect(mapStateToProps, mapDispatchToProps)(OpenLink);

const Styles = StyleSheet.create({
  Content: {
    flex: 1
  },
  ContentBg: {
    flex: 1,
    width: Metrics.width,
    height: Metrics.screenHeight
  },
  searchInput: {
    color: '#000',
    borderColor: '#ccc',
    borderWidth: 2,
    borderRadius: 10,
  },
  textContent: {
    height: 80,
    marginTop: 298,
    padding: 10
  },
  textAligns: {
    textAlign: 'center',
    margin: 8
  },
});